<template>
	<div>
		<Header></Header>
		<div class="content">
			<el-row v-loading="loading">
				<h2 class="title">{{$t('device.deviceManage')}}</h2>
				<!--查询条件-->
				<el-row class="search-form-row">
					<el-form :inline="true" class="demo-form-inline">
						<!--查询条件：设备名称-->
						<el-form-item :label="$t('video.deviceName')" label-width="100px">
							<el-input type="text" v-model="searchGuid" @keyup.enter.native="query(1)" maxlength="20"></el-input>
						</el-form-item>
						<el-form-item :label="$t('persons.company')" label-width="100px">
							<el-select v-model="belongCompany" style="width: 90%;">
								<el-option v-for="co in subCompanyList" :key="co.id" :label="co.companyName" :value="co.id"></el-option>
							</el-select>
						</el-form-item>
						<!--查询按钮-->
						<el-form-item>
							<el-button type="primary" @click="query(1)">{{$t('standard.query')}}</el-button>
						</el-form-item>
						<!--新增设备-->
						<el-form-item>
							<el-button type="primary" @click="showAddDialog()">{{$t('device.newDevice')}}</el-button>
						</el-form-item>
					</el-form>
				</el-row>
				<!--结果列表-->
				<el-row>
					<div v-if="deviceData.length == 0" class="el-table__empty-block"><span class="el-table__empty-text">暂无数据</span></div>
					<el-row v-for="item in deviceData" :key="item.id" class="device-row" v-on:mouseover.native="over($event)"
					 v-on:mouseout.native="out($event)">
						<img src="../../assets/device-icon.png" style="float: left; margin-left: 50px;margin-top: 30px;" />
						<div style="width: auto; margin-left: 10px;float: left;margin-top: 55px;">
							<p style="margin: 3px;">
								<span>{{$t('video.deviceName')}}{{item.guid}}</span>
								<span style="margin-left: 30px">{{$t('video.user')}}{{item.userName}}</span>
								<span style="margin-left: 30px">{{$t('persons.company')}}<span v-html="getCompanyName(item.companyId)"></span></span>
							</p>
						</div>
						<div style="width: auto; margin-left: 10px;float: right;margin-top: 50px; margin-right: 50px;">
							<el-button style="background-color: #ffcc65;border-color: #ffcc65;color: #fff;" @click="showModifyDialog(item)">
								{{$t('standard.modify')}}
							</el-button>
							<el-button type="danger" @click="deleteDevice(item.id)">{{$t('standard.delete')}}</el-button>
						</div>
					</el-row>
				</el-row>
				<!--分页查询-->
				<el-row style="text-align: right;margin-top: 10px">
					<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageInfo.currentPage"
					 :page-sizes="[10, 20, 50]" :page-size="pageInfo.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.totalNum">
					</el-pagination>
				</el-row>
				<!--修改设备信息-->
				<el-dialog :title="modFormTitle" :visible.sync="modFormVisible" :show-close="false">
					<el-row>
						<el-form :model="addForm" :rules="addRules" ref="addForm" label-width="120px" style="text-align: left">
							<el-form-item :label="$t('video.deviceName')" prop="guid">
								<el-input v-model="addForm.guid" auto-complete="off" style="width: 217px;" :disabled="!!addForm.id"></el-input>
							</el-form-item>
							<el-form-item :label="$t('video.user')">
								<el-select v-model="addForm.deviceUser" style="width: 217px;">
									<el-option v-for="u in userSelections" :key="u.key" :label="formatValue(u.value)" :value="u.key">
									</el-option>
								</el-select>
							</el-form-item>
						</el-form>
					</el-row>
					<span slot="footer" class="dialog-footer">
						<el-button @click="modFormVisible = false">{{$t('standard.cancel')}}</el-button>
						<el-button type="primary" @click="save()" :loading="saving">{{$t('standard.confirm')}}</el-button>
					</span>
				</el-dialog>
				<!--新增设备信息-->
				<el-dialog :title="addFormTitle" :visible.sync="addFormVisible" :show-close="false">
					<el-row style="margin-bottom: 30px;">
						<span style="padding-right:140px;"><span style="color: red">{{$t('standard.prompt')}}</span>{{$t('text.text6')}}</span>
					</el-row>
					<el-row>
						<el-form :model="addForm" :rules="addRules" ref="addForm" label-width="120px" style="text-align: left">
							<el-form-item :label="$t('video.deviceName')" prop="guid">
								<el-input v-model="addForm.guid" auto-complete="off" style="width: 217px;" :disabled="!!addForm.id"></el-input>
							</el-form-item>
							<!--超管不需要输入code，临时解决方案判断用户id=-999-->
							<el-form-item :label="$t('device.code')" prop="checkCode"  v-if="user.id!==-999">
								<el-input v-model="addForm.checkCode" auto-complete="off" style="width: 217px;"></el-input>
							</el-form-item>
							<el-form-item :label="$t('video.user')"  label-width="120px" style="text-align: left" prop="deviceUser">
								<el-select v-model="addForm.deviceUser">
									<el-option v-for="u in userSelections" :key="u.key" :label="formatValue(u.value)" :value="u.key"></el-option>
								</el-select>
							</el-form-item>
						</el-form>
					</el-row>
					<span slot="footer" class="dialog-footer">
						<el-button @click="addFormVisible = false">{{$t('standard.cancel')}}</el-button>
						<el-button type="primary" @click="save()" :loading="saving">{{$t('standard.confirm')}}</el-button>
					</span>
				</el-dialog>

			</el-row>
		</div>
	</div>
</template>

<script>
	import device from './device'

	export default device;
</script>

<style>
	.content {
		margin: 60px 50px 0 50px;
	}

	.search-form-row {
		text-align: left;
	}

	.title {
		text-align: left;
	}

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 120px;
		height: 120px;
		line-height: 120px !important;
		text-align: center;
	}

	.avatar {
		width: 120px;
		height: 120px;
		display: block;
	}

	.device-row {
		height: 140px;
		text-align: left;
		cursor: pointer;
		/*background: url(../../../assets/device-bg.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;*/
	}

	.device-on {
		background-image: url(../../assets/device-bg.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
</style>
